<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/oksub.css">
    <meta charset="utf-8">
    <title></title>
</head>
<style>
    .list-con {
        padding: 0 10px 15px 10px;
        margin-bottom: 20px;
    }

    .list-con .layui-table td,
    .layui-table-view,
    .layui-table[lay-skin=line],
    .layui-table[lay-skin=row] {
        border: none;
    }

    .list-con .layui-table tbody {
        color: #777777;
    }

    .list-con .layui-table tbody tr:hover,
    .layui-table[lay-even] tr:nth-child(even) {
        background-color: rgb(255, 255, 255);
        color: #000000;
    }

    .layui-table tr {
        border-bottom: 1px #e2e2e2 solid;
    }

    body .layui-layer-molv .layui-layer-title {
        background: #1E9FFF;
        color: #fff;
        border: none;
    }

    body .layui-layer-molv .layui-layer-maxmin:hover {
        color: #ffffff;
    }

    body .layui-layer-molv .layui-layer-btn a {
        background: #1E9FFF;
        color: #fff;
        border: none;
    }

    body .layui-layer-molv .layui-layer-btn .layui-layer-btn1 {
        background: #8bc2ef;
        color: #fff;
        border: none;
    }


    .required {
        color: #ffb800;
        font-size: 32px;
        float: left;
        margin-left: 5px;
        margin-top: 5px;
        position: absolute;
        right: -15px;
    }

    .addtea-con .layui-form-select dl dd.layui-this {
        background-color: #1E9FFF !important;
    }

    .addtea-con .layui-btn {
        background-color: #1E9FFF !important;
    }

    .addtea-con .layui-form-select dl {
        max-height: 230px !important;
    }

    .addinput {
        margin-right: 40px;
    }

    .addselect {
        width: 180px;
        height: 100px;
    }
</style>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户管理</legend>
</fieldset>
<div class="layui-row">
    <form class="layui-form" style="margin-top:15px;margin-bottom: 25px" action="">
        <div>
            <div class="layui-inline">
                <label class="layui-form-label">用户ID</label>
                <div class="layui-input-block">
                    <input type="text" name="policeId" id="selPoliceId" placeholder="请输入用户ID" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="policeName" id="selPoliceName" placeholder="请输入用户名" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">当前状态</label>
                <div class="layui-input-block">
                    <select name="ctState" id="ctState">
                        <option value="0">全部</option>
                        <option value="1">正常</option>
                        <option value="2">被锁</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">所属部门</label>
                <div class="layui-input-inline layui-form" lay-filter="test2">
                    <select name="selDepartmentId" id="selDepartmentId" lay-verify="required"  style="float: left;position: relative;"
                            lay-verify="selDepartmentId">
                    </select>
                </div>
                <div class="layui-inline" style="margin-right: 8px">
                    <button class="layui-btn" id="search">
                        <i class="layui-icon layui-icon-search" style="font-size: 14px">搜索</i>
                    </button>
                </div>
                <div id="selectEmpty" style="margin-left:0px;"
                     class="layui-btn layui-btn-normal">
                    刷新
                </div>
            </div>
        </div>
    </form>
</div>

<!--数据表格-->
<div class="list-con">
    <table class="layui-hide" id="tableId" lay-filter="test"></table>
</div>

<from style="display:none;margin: 20px 60px 20px 20px" class="layui-form" name="userEdit" id="userEdit" action=""
      lay-filter="useru">
    <div class="layui-form-item">
        <label class="layui-form-label">用户ID&#12288;</label>
        <div class="layui-input-block addinput">
            <input type="text" id="policeId" name="policeId" lay-verify="required" style="background-color: #dcdcdc"
                   placeholder="请输入标题" autocomplete="off" class="layui-input" disabled="disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名&#12288;</label>
        <div class="layui-input-block addinput">
            <input id="fullName" name="fullName" type="text" style="float: left;position: relative;" class="layui-input"
                   placeholder="请输入姓名" lay-verify="required" autocomplete="off">
            <i class="required">*</i>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电&#12288;&#12288;话</label>
        <div class="layui-input-block addinput">
            <input id="phone" name="phone" type="phone" style="float: left;position: relative;" class="layui-input"
                   placeholder="请输入电话号码" lay-verify="email" autocomplete="off">
            <i class="required">*</i>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性&#12288;&#12288;别</label>
        <div class="layui-input-block addinput" name="agender" id="agender">
            <input type="radio" name="agender" id="agender1" value="1" title="男"/>
            <input type="radio" name="agender" id="agender0" value="0" title="女"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属部门</label>
        <div class="layui-input-block addinput">
            <i class="required">*</i>
            <select name="departmentIds" id="departmentIds" style="float: left;position: relative;"
                    lay-verify="departmentIds">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属角色</label>
        <div class="layui-input-block addinput">
            <i class="required">*</i>
            <select name="roleId" id="roleId" style="float: left;position: relative;" lay-verify="roleId">
            </select>
        </div>
    </div>
</from>
</body>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="rpwd" style="background-color: #ffcc00">重置密码</a>
</script>

<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>

<script>

    var roleId = "";
    var departmentId = "";

    layui.use(['form', 'laydate', 'table', 'layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer

        /*动态加载部门下拉框*/
        $.ajax({
            url: mainUri + "/dep/select",
            type: 'post',
        }).done(function (datas) {
            var list = datas['data'];
            var option;
            for (var i = 0; i < list.length; i++) {
                option += "<option value='" + list[i]['departmentId'] + "'>" + list[i]['departmentName'] + "</option>";
                $("#selDepartmentId").html(option);
                $("#departmentIds").html(option);
            }
            form.render('select','test2');
        }).fail(function () {
            layer.msg("服务器错误");
        });
        //绑定用户信息
        let articleTable = table.render({
            elem: '#tableId'
            , url: mainUri + '/user/selectAll'
            , title: '用户数据表'
            , page: true
            , cols: [[
                {field: 'policeId', title: '用户ID', fixed: 'left', unresize: true, sort: true}
                , {field: 'fullName', title: '用户名'}
                , {field: 'phone', title: '电话'}
                , {
                    field: 'agender', title: '性别', templet: function (d) {
                        if (d.agender == true) {
                            return '男'
                        } else {
                            return '女'
                        }
                    }
                }
                , {
                    field: 'departmentIds', title: '所属部门', templet: function (d) {
                        return d.department.departmentName
                    }
                }
                , {
                    field: 'roleId', title: '（所属角色）级别', color: "#ffcc00", templet: function (d) {
                        return d.role.roleName
                    }
                }
                , {
                    field: 'isLocking', title: '当前状态', color: "#ffcc00", templet: function (d) {
                        if(d.isLocking == 5){
                            return "被锁";
                        }
                        return "正常";
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]],
            skin: 'row', //行边框风格:line （行边框风格） row （列边框风格） nob （无边框风格）
            even: true, //开启隔行背景:true/false
            size: 'sm',//设定表格尺寸:sm （小尺寸） lg （大尺寸）
            page: {
                layout: ['prev', 'page', 'next', 'skip', 'count'],
                groups: 3,
                limit: 15,
                theme: '#1E9FFF',
            },
        });
        //刷新
        $("#selectEmpty").on('click', function () {
            //置空搜索框
            $("#selPoliceId").val("")
            $("#selPoliceName").val("");
            articleTable.reload({
                url: mainUri + '/user/selectAll'//Ajax请求
            })

        })
        //搜索功能
        $("#search").on('click', function () {
            //获取输入的值
            var selPoliceId = $("#selPoliceId").val();
            var selPoliceName = $("#selPoliceName").val();
            var ctState = $("#ctState").find("option:checked").val();
            var selDepartmentId = $("#selDepartmentId").find("option:checked").val();
            articleTable.reload({
                url: mainUri + '/user/selectAllBy',//Ajax路径
                //传到服务器的数据
                where: {policeId: selPoliceId, policeName: selPoliceName,ctState: ctState,departmentId: selDepartmentId},
            });
            return false;
        })

        //监听行工具事件
        //删除操作
        table.on('tool(test)', function (obj) {
            var data = obj.data;//获得当前行数据
            if (obj.event === 'del') {
                layer.confirm('确定删除用户吗？', function (index) {
                    showloading(true)
                    $.ajax({
                        type: 'post',
                        url: mainUri + "/user/delete", // ajax请求路径
                        data: {policeId: data.policeId},//传到后端数据
                        success: function (data) {
                            showloading(false)
                            if (data.data > 0) {
                                layer.msg('删除成功');
                                articleTable.reload();
                            } else {
                                layer.msg('删除失败');
                            }
                        },
                        error: function () {
                            showloading(false)
                        }
                    });
                });
            } else if (obj.event === 'edit') {//修改
                $("#policeId").val(obj.data.policeId);
                $("#fullName").val(obj.data.fullName);
                var agender = obj.data.agender;
                if (agender) {
                    $("input[name=agender][value=1]").prop("checked", "false");
                } else {
                    $("input[name=agender][value=0]").prop("checked", "true");
                }
                $("#phone").val(obj.data.phone);
                roleId = obj.data.role.roleId;
                departmentId = obj.data.department.departmentId;
                //$("#roleId").val(obj.data.role.roleId);
                //$("#departmentIds").val(obj.data.department.departmentId)
                form.render();
                openDetial(obj, obj.data)
                //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
            } else if (obj.event === 'rpwd') {//重置密码
                layer.confirm('你确定要重置密码吗？', function (index) {
                    showloading(true)
                    $.ajax({
                        type: 'post',
                        url: mainUri + "/user/updatePwd",// ajax请求路径
                        data: {policeId: data.policeId},
                        success: function (data) {
                            showloading(false)
                            if (data.code == 0) {
                                layer.msg("新密码为:123456");
                                return false;
                            }
                            layer.msg(rs.msg);
                        },
                        error: function () {
                            showloading(false)
                        }
                    });
                });
            }

            /*动态加载部门下拉框*/
            $.ajax({
                url: mainUri + "/dep/select",
                type: 'post',
            }).done(function (datas) {
                var list = datas['data'];
                var option;
                for (var i = 0; i < list.length; i++) {
                    if (list[i]['departmentId'] == departmentId) {
                        option += "<option selected=\"\" value='" + list[i]['departmentId'] + "'>" + list[i]['departmentName'] + "</option>";
                    } else {
                        option += "<option value='" + list[i]['departmentId'] + "'>" + list[i]['departmentName'] + "</option>";
                    }
                    $("#selDepartmentId").html(option);
                    $("#departmentIds").html(option);
                }
                form.render('select');
            }).fail(function () {
                layer.msg("服务器错误");
            });

            /*动态加载角色下拉框*/
            $.ajax({
                url: mainUri + "/role/select",
                type: 'post',
            }).done(function (datas) {
                var list = datas['data'];
                var option;
                for (var i = 0; i < list.length; i++) {
                    if (roleId == list[i]['roleId']) {
                        option += "<option selected=\"\" value='" + list[i]['roleId'] + "'>" + list[i]['roleName'] + "</option>";
                    } else {
                        option += "<option value='" + list[i]['roleId'] + "'>" + list[i]['roleName'] + "</option>";
                    }
                    $("#roleId").html(option);
                }
                form.render('select');
            }).fail(function () {
                layer.msg("服务器错误");
            });

            //用户新信息修改
            function openDetial(title, area, obj) {
                layer.open({
                    type: 1,
                    title: "用户信息修改",
                    closeBtn: 1,
                    skin: 'layui-layer-molv',
                    area: area,
                    shade: 0.6,
                    maxmin: true,//允许全屏最小化
                    id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳1280977330748
                    btn: ['保存', '取消'],
                    btnAlign: 'r',
                    content: $("#userEdit"),//引用的弹出层的页面层的方式加载修改界面表单
                    area: ['500px', '480px'],
                    success: function (index) {
                    },
                    btn1: function (index, layero) {
                        showloading(true)
                        $.ajax({
                            url: mainUri + "/user/updateInfo",//Ajax请求路径
                            data: {
                                "noChangeSession": 1,
                                "policeId": $("#policeId").val(),
                                "fullName": $("#fullName").val(),
                                "phone": $("#phone").val(),
                                "agender": $("input[name='agender']:checked").val(),
                                "roleId": $("#roleId").find("option:checked").val(),
                                "departmentId": $("#departmentIds").find("option:checked").val()
                            },    //这个是传给后台的值
                            type: "Post",
                            dataType: "json",
                            success: function (data) {
                                showloading(false)
                                if (data.code == 0) {    //这个是从后台取回来的状态值
                                    layer.msg("修改成功", {icon: 6});
                                    layer.closeAll();//关闭弹窗
                                    articleTable.reload();
                                } else {
                                    layer.msg("修改失败", {icon: 5});
                                }
                            },
                            error: function () {
                                showloading(false)
                            }

                        });
                    },
                    btn2: function (index, layero) {
                    }
                });
            }
        });
    });

</script>
</html>
